window.onload = function () {
    fixed();
    banner();
    timer();
};

var fixed = function () {
    var top = document.querySelector('.top');
    var banner = document.querySelector('.banner');
    var height = banner.offsetHeight;
    var opacity = 0.82;
    window.onscroll = function () {

        var scroll = document.body.scrollTop || document.documentElement.scrollTop;

        if (scroll <= height) {
            opacity = scroll / height * 0.82;
        } else {
            opacity = 0.82;
        }
        top.style.backgroundColor = 'rgba(255,0,0,' + opacity + ')';
    };
};
var banner = function () {
    var banner = document.querySelector('.banner');
    var imgList = banner.querySelector('ul:first-child');
    var dotList = banner.querySelector('ul:last-child');
    var width = banner.offsetWidth;
    var index = 1;
    var timer = setInterval(function () {
        index++;
        transition();
        setTranslateX(-index * width);
    }, 3000);

    function transition() {
        imgList.style.transition = 'transform 0.2s';
    }
    function noTransition() {
        imgList.style.transition = 'none';
    }

    function setTranslateX(distance) {
        imgList.style.transform = 'translateX(' + distance + 'px)';
    }
    imgList.addEventListener('transitionend', function () {
        if (index <= 0) {
            index = 8;
            noTransition();
            setTranslateX(-index * width);
        }

        if (index >= 9) {
            index = 1;
            noTransition();
            setTranslateX(-index * width);
        }

        for (var i = 0; i < dotList.children.length; i++) {
            dotList.children[i].classList.remove('now');
        }
        dotList.children[index - 1].classList.add('now');
    });

    var originX = 0;
    var distanceX = 0;
    var isMove = false;
    banner.addEventListener('touchstart', function (e) {
        clearInterval(timer);
        originX = e.touches[0].clientX;
    });
    banner.addEventListener('touchmove', function (e) {
        var targetX = e.touches[0].clientX;

        distanceX = targetX - originX;



        var translateX = -index * width + distanceX;

        noTransition();

        setTranslateX(translateX);

        isMove = true;

    });

    banner.addEventListener('touchend', function (e) {
        if (isMove) {
            if (Math.abs(distanceX) < width / 3) {
                transition();
                setTranslateX(-index * width);

            } else {
                if (distanceX > 0) {
                    index--;

                } else {
                    index++;
                }
                transition();
                setTranslateX(-index * width);
            }
        }
        originX = 0;
        distanceX = 0;
        isMove = false;
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            transition();
            setTranslateX(-index * width);
        }, 3000);
    });

};
var timer = function () {
    var time = 2 * 60 * 60;

    var spans = document.querySelector('.time').querySelectorAll('span');


    var timeId = setInterval(function () {
        var h = Math.floor(time / 3600);
        var m = Math.floor(time % 3600 / 60);
        var s = time % 60;

        spans[0].innerHTML = Math.floor(h / 10);
        spans[1].innerHTML = h % 10;

        spans[3].innerHTML = Math.floor(m / 10);
        spans[4].innerHTML = m % 10;

        spans[6].innerHTML = Math.floor(s / 10);
        spans[7].innerHTML = s % 10;



        time--;

        if (time === 0) {
            clearInterval(timeId);
        }
    }, 1000);
};